<template>
    <div class="login">
        <el-card class="login_card">
            <el-image class="login_image" :src="logo_url"></el-image>
            <p class="login_title">登录</p>
            <p class="login_desc">欢迎登录【{{this.$constant.appName}}】</p>
            <el-form ref="ruleForm" :model="form" :rules="rules">
                <el-form-item prop="username">
                    <el-input placeholder="请输入账号" v-model="form.username" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="form.password" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loginLoading" style="background: #5b89fe; color: white" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    import constantJs from '../assets/js/constant'
    import { login } from '../api/login'
    export default {
        components: {},
        data() {
            return {
                logo_url: require('@/assets/img/logo.png'),
                form: {
                    username: '',
                    password: ''
                },
                loginLoading: false,
                rules: {
                    username: [
                        { require: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    password: [
                        { require: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        created() { },
        mounted() { },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loginLoading = true
                        login(this.form.username, this.form.password)
                            .then((res) => {
                                if (res.code === 0) {
                                    localStorage.setItem(constantJs.authTokenHeader, res.data.token)
                                    console.log(this.form.username)
                                    localStorage.setItem(constantJs.authUserHeader, this.form.username)
                                    this.$router.push('/home')
                                } else {
                                    this.$message.error(res.msg)
                                    this.loginLoading = false
                                }
                                // eslint-disable-next-line handle-callback-err
                            }).catch((err) => {
                                this.loginLoading = false
                            })
                    } else {
                        return false
                    }
                })
            }
        }

    }
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/bg.jpg");
    position: absolute;
    left: 0;
    top: 0;
    background-size: 100% 100%;
}
.login_card {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 20%;
    min-width: 300px;
    height: 500px;
    min-height: 500px;
    border-radius: 10px;
    text-align: center;
}
.login_image {
    width: 50px;
    height: 50px;
    margin-top: 40px;
}
.login_title {
    font-size: 25px;
    font-weight: bold;
}
.login_desc {
    letter-spacing: 2px;
    color: #999a9a;
}

.el-button {
    width: 100%;
}
</style>
